<template>
	<!-- 20230509 -->
	<view class="mall-my-refund-page">
		<!-- 页面内容 -->
		<view class="page-content">

			<!-- 退款产品 -->
			<view class="bg-ff padding-tb-10 padding-lr-30">
				<jc-mall-orderProducts :list="[orderProduct]"></jc-mall-orderProducts>
				
				<!-- <view class="padding-20 bg-f5 flex align-center">
					<image class="jc-image-120" :src="orderProduct.product_cover_img" mode="aspectFill"></image>
					<view class="flex-one margin-left-20">
						<text class="line-height-30 text-24 text-4d text-cut-one">{{orderProduct.product_name}}</text>
						<text
							class="margin-top-20 line-30 height-60 text-22 text-80 text-cut-two">{{orderProduct.product_sku_name}}</text>
					</view>
				</view> -->
			</view>

			<!-- 退款信息 -->
			<view class="margin-top-20 padding-lr-30 bg-ff">

				<view class="height-100 flex align-center justify-between border-bottom-ed">
					<view class="flex align-center">
						<text class="line-height-100 text-30 text-main">*</text>
						<text class="line-height-100 text-30">退款原因</text>
					</view>
					
					<view class="margin-left-30 flex-one">
						<picker :range="causeList" range-key="content" @change="changeCause">
							<view class="flex align-center justify-end">
								<text class="line-height-100 text-30 text-cut-one"
									:class="refundContent ? 'text-1a' : 'text-aa'">{{refundContent ? refundContent : '选择退款原因'}}</text>
								<text class="margin-left-15 line-height-100 tyIcon-arrow-right text-24 text-4d"></text>
							</view>
						</picker>
					</view>
				</view>

				<view class="height-100 flex align-center justify-between border-bottom-ed">
					<view class="flex align-center">
						<text class="line-height-100 text-30">商品件数</text>
						<text class="margin-left-15 text-24 text-aa">最多可退{{orderProduct.actual_number}}件</text>
					</view>
					<ty-text-stepper :value="number" :min="1" :max="orderProduct.actual_number" :disabled-input="true"
						:async-change="stepperAsync" @change="change">
					</ty-text-stepper>
				</view>

				<view class="height-100 flex align-center justify-between border-bottom-ed">
					<text class="line-height-100 text-30">退款金额</text>
					<view class="text-28 text-bold">
						¥{{refundMoney}}
					</view>
				</view>

				<view class="padding-tb-30 border-bottom-ed">
					<text class="padding-bottom-20 text-30">退款说明</text>
					<view class="padding-20 radius-10 bg-f5">
						<textarea class="textarea line-40 text-26" placeholder="请输入退款说明(可不填)"
							placeholder-class="text-26 text-cc" maxlength="200" v-model="remark"
							:show-count="false"></textarea>
						<view class="flex justify-end text-26">
							{{remark.length > 200 ? 200 : remark.length}}/200
						</view>
					</view>


				</view>

				<view class="padding-top-30 padding-bottom-15">
					<view class="flex align-center">
						<text class="text-30">上传凭证截图</text>
						<text class="margin-left-15 text-24 text-aa">最多3张</text>
					</view>
					<view class="">
						<!-- 图片和视频 -->
						<ty-image-images-upload :video-count="0" :count="3" @imageChange="imageChange">
						</ty-image-images-upload>
					</view>
				</view>
			</view>

			<view class="jc-footer-safe">
				<view class="padding-lr-30 margin-bottom-10" @click="orderRefund">
					<view class="line-height-80 radius-40 bg-main text-center text-28 text-ff">确定</view>
				</view>
			</view>
		</view>

		<!-- 页面浮层 -->
		<view class="page-layer">

		</view>
	</view>
</template>

<script>
	import mall from "../api/mall.js"
	export default {
		data() {
			return {
				// 订单产品表ID
				orderProductId: '',
				// 退款产品 单条数据
				orderProduct: {},
				// 退款数量
				number: 1,
				// 退款金额
				refundMoney: 0,
				// 退款原因ID
				refundId: '',
				// 退款原因内容
				refundContent: '',
				// 退款说明
				remark: '',
				// 退款图片
				refundImages: [],
				// 退款原因列表
				causeList: [],
				// 步进器异步
				stepperAsync: true,
			}
		},

		onLoad(options) {
			this.orderProductId = options.id || ''
		},

		onReady() {
			// 获取退款原因
			mall.listRefundCause().then(res => {
				if (res.code == 0) {
					this.causeList = res.data.cause_list
				}
			})

			// 获取退款产品
			mall.refund.getRefundProduct(this.orderProductId).then(res => {
				if (res.code == 0) {
					this.orderProduct = res.data.order_product
				}
			})

			this.getRefundMoney()
		},

		methods: {
			/**
			 * 更改退款数量
			 * @date 2023-02-02
			 */
			change(e) {
				if (e.type == 3) {
					if (e.number <= 1) {
						this.cn.toast('数量不能再少了哦~')
						return false
					} else if (e.number + 1 > this.orderProduct.actual_number) {
						this.cn.toast('数量超出范围~')
						return false
					}
					this.number = e.number
				} else if (e.type == 2) {
					if (e.number <= 1) {
						this.cn.toast('数量不能再少了哦~')
						return false
					}
					this.number--
				} else if (e.type == 1) {
					if (e.number + 1 > this.orderProduct.actual_number) {
						this.cn.toast('数量超出范围~')
						return false
					}
					this.number++
				}

				this.getRefundMoney()
			},

			/**
			 * 获取退款金额
			 * @date 2023-02-02
			 */
			getRefundMoney() {
				mall.refund.getOrderRefundMoney(this.orderProductId, this.number).then(res => {
					if (res.code == 0) {
						this.refundMoney = res.data.refund_money
					}
				})
			},

			/**
			 * 选择退款原因
			 * @param {Object} e
			 * @date 2023-02-02
			 */
			changeCause(e) {
				let index = e.detail.value

				this.refundContent = this.causeList[index].content
				this.refundId = this.causeList[index].id

			},

			/**
			 * 选择退款图片
			 * @param {Object} e
			 * @date 2023-02-02
			 */
			imageChange(e) {
				this.refundImages = e.image_list
			},

			/**
			 * 退款
			 * @param {Object} e
			 * @date 2023-02-02
			 */
			orderRefund() {
				if (!this.refundId) {
					this.cn.toast('请选择退款原因')
					return false
				}
				mall.refund.insertOrderRefund(this.orderProductId, this.number,
					this.refundId, this.refundImages, this.remark).then(res => {
					if (res.code == 0) {
						this.cn.alert(res.msg).then(res => {
							uni.navigateBack()
						})
					}
				})
			}
		}
	}
</script>
<style scoped>
	/* 备注 */
	.textarea {
		width: 100%;
		height: 120rpx;
		line-height: 40rpx;
	}
</style>
